<template>
  <div class="index">
    <!-- 首页 -->
    <!-- <CascaderComp /> -->
    <TableComp
      :handleFun="handleFun"
      @handleClick="handleClick"
      :tableHead="tableHead"
      :tableData="tableData"
      class="table_comp"
    />
    <FormComp :formConfig="formConfig" />
  </div>
</template>

<script setup>
import TableComp from "@/components/TableComp.vue";
import exportPurpleIcon from "@/styles/icon/export_blue.svg";
import { ref, reactive } from "vue";
import CascaderComp from "@/components/CascaderComp.vue";
import FormComp from "@/components/FormComp.vue";

// 表格上方操作按钮
let handleFun = ref([
  {
    label: "添加",
    type: "primary",
    prop: "add",
  },
  {
    label: "导出",
    type: "text",
    img: exportPurpleIcon,
    prop: "export",
  },
  {
    label: "下载模板",
    type: "primary",
    prop: "downLoad",
  },
]);
// 表头
let tableHead = ref([
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "地址",
    prop: "address",
  },
  {
    label: "操作",
    options: [
      {
        label: "详情",
        prop: "detail",
        type: "primary",
      },
      {
        label: "删除",
        prop: "delete",
        type: "danger",
      },
    ],
  },
]);
// 表格数据
let tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);
let formConfig = reactive({
  optionList: [
    // 以下属性值均为父组件传值的模板
    {
      label: "一年级",
      value: 1,
    },
    {
      label: "P2",
      value: 2,
    },
    {
      label: "P3",
      value: 3,
    },
    {
      label: "P4",
      value: 4,
    },
  ],
  rules: {
    // 以下属性值均为父组件传值的模板
    name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    level: [{ required: true, message: "请选择年级", trigger: "change" }],
    date: [{ required: true, message: "请选择日期", trigger: "change" }],
  },
  items: [
    {
      // 标签
      label: "姓名",  
      // 表单接收值
      prop: "name",
      // 当前组件类型
      type: "Text",
      placeholder: '请输入名称'
    },
    {
      label: "年级",
      prop: "level",
      type: "Select",
      placeholder: '请选择所在年级'
    },
    {
      label: "入学日期",
      prop: "date",
      type: "Date",
    },
    {
      label: "介绍",
      prop: "desc",
      type: "Textarea",
      placeholder: '请输入介绍'
    },
  ],
});

/**
 * 表格组件传递的方法
 */
function handleClick(val) {
  // console.log('val', val);
  const { prop, data } = val;
  switch (prop) {
    case "add":
      handleAdd();
      break;
    case "export":
      handleExport();
      break;
    case "downLoad":
      handleDownLoad();
      break;
    case "detail":
      handleDetail(data);
      break;
    case "delete":
      handleDelete(data);
      break;
  }
}
/**
 * 添加
 */
function handleAdd() {
  console.log("触发添加");
}
/**
 * 导出
 */
function handleExport() {
  console.log("触发导出");
}
/**
 * 下载模板
 */
function handleDownLoad() {
  console.log("触发下载模板");
}
/**
 * 详情
 */
function handleDetail(val) {
  console.log("触发详情", val);
}
/**
 * 删除
 */
function handleDelete(val) {
  console.log("触发删除", val);
}
</script>

<style scoped lang="scss">
.index {
  .table_comp {
    ::v-deep .el-button:nth-of-type(2) {
      float: right;
    }
  }
}
</style>
